<template>

        <view>
			<view class="inv-h-w">
				<view :class="['inv-h',Inv==1?'inv-h-se':'','inv-tab']" @click="changeTab(1)">
					<text class="">未使用</text>
				</view>
				<view :class="['inv-h',Inv==2?'inv-h-se':'','inv-tab']" @click="changeTab(2)">
					<text class="">已使用</text>
				</view>
				<view :class="['inv-h',Inv==3?'inv-h-se':'','inv-tab']" @click="changeTab(3)">
					<text class="">已过期</text>
				</view>
			</view>
			<view class="tab-view tab-view-0" v-show="Inv == 1">
<!-- 				<view class="exchange-container">
					<input class="uni-input" placeholder="请输入兑换码" v-model="exchangeCode"/>
					<view :class="[exchangeCode ? 'orange' : '']" @click="exchange">兑换</view>
				</view> -->
				<view class="list">
					<view class="red-packet" v-for="(item, index) in validPackets" :key="index">
						<view class="red-packet-top-left">
							<view class="money">
								<text>￥</text>
								<text>{{item.amount}}</text>
							</view>
							<view>满{{item.cill}}元可用</view>
						</view>
						<view class="red-packet-top-right">
							<view class="">{{item.redPackName}}</view>
							<view class="date">
								<text>{{item.createTime}}至{{item.expireTime}}</text>
							</view>
						</view>
						<view class="red-packet-bottom" @click="changeEllipsis(item)">
							<view :class="[item.ellipsis ? 'ellipsis' : '']">仅限设备{{item.deviceIdStr}}使用</view>
							<image src="/static/icons/down.png"></image>
							<!-- <view class=""></view> -->
						</view>
					</view>
				</view>
			</view>
			<view class="tab-view tab-view-expire" v-show="Inv == 2">
				<view class="list">
					<view class="red-packet" v-for="(item, index) in hasUsedPackets" :key="index">
						<view class="red-packet-top-left">
							<view class="money">
								<text>￥</text>
								<text>{{item.amount}}</text>
							</view>
							<view>满{{item.cill}}元可用</view>
						</view>
						<view class="red-packet-top-right">
							<view class="">{{item.redPackName}}</view>
							<view class="date">
								<text>已使用</text>
							</view>
						</view>
						<view class="red-packet-bottom">
							<view :class="[item.ellipsis ? 'ellipsis' : '']">仅限设备{{item.deviceIdStr}}使用</view>
							<image src="/static/icons/down.png"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="tab-view tab-view-expire" v-show="Inv == 3">
				<view class="list">
					<view class="red-packet" v-for="(item,index) in expiredPackets" :key="index">
						<view class="red-packet-top-left">
							<view class="money">
								<text>￥</text>
								<text>{{item.amount}}</text>
							</view>
							<view>满{{item.cill}}元可用</view>
						</view>
						<view class="red-packet-top-right">
							<view class="">{{item.redPackName}}</view>
							<view class="date">
								<text>已过期</text>
							</view>
						</view>
						<view class="red-packet-bottom">
							<view :class="[item.ellipsis ? 'ellipsis' : '']">仅限设备{{item.deviceIdStr}}使用</view>
							<image src="/static/icons/down.png"></image>
							<!-- <view class=""></view> -->
						</view>
					</view>
				</view>
			</view>
		</view>
</template>
<script>
	import redPacket from "./redPacket.js"
	export default redPacket;
</script>

<style>
	@import url("./redPacket.css");
</style>